<template>
	<view class="iconfont" :class="['m-icon-'+type]" :style="{color:color,'font-size':fontSize}" @click="onClick()">
		<image class="iconImage" :style="{width: fontSize, height: fontSize}" :src="getImage" mode="" v-show="isShow"></image>
	</view>
</template>

<script>
	export default {
		props: {
			/**
			 * 图标类型
			 */
			type: String,
			/**
			 * 图标颜色
			 */
			color: String,
			/**
			 * 图标大小
			 */
			size: {
				type: [Number, String],
				default: 20
			},
			/**
			 * 图片地址
			 */
			image: {
				type: String,
				default: ''
			}
		},
		computed: {
			fontSize() {
				var size = Number(this.size)
				size = isNaN(size) ? 20 : size
				return `${size}px`
			},
			getImage() {
				return this.image;
			},
			isShow() {
				return (this.image != '') ? true : false;
			}
		},
		methods: {
			onClick() {
				this.$emit('click')
			}
		}
	}
</script>

<style>
	@import "./iconfont.css";
	/* .iconfont{margin-right: 5px;} */
</style>
